<template>
  <div class="dashboard-editor-container">
    <!-- <github-corner class="github-corner"  margin-top:12px;  /> -->

    <el-row style="width: 86.3%; top: 6px; z-index: 999; position: fixed">
      <el-col :span="5" class="card-box">
        <!-- <i class="el-icon-s-data" /><span style="font-weight:600;color:#666;margin-right: 450px;margin-left: 5px;">
          销售总览
        </span> -->

        <!-- <el-cascader
          class="region"
          v-model="queryParams.salesGrade"
          placeholder="选择店铺分组"
          :options="cascadeList"
          :props="{ checkStrictly: true }"
          @change="handleChange"
          style="width: 300px; height: 30px"
        >
        </el-cascader> -->
      </el-col>
      <el-col :span="12" style="height: 30px">
        <nav id="navbar">
          <!-- <ul>
            <li :class="{ active: isActiveSection(1) }">
              <a href="#section1" @click="scrollToSection(1)">销售总览</a>
            </li>
            <li :class="{ active: isActiveSection(2) }">
              <a href="#section2" @click="scrollToSection(2)">渠道排行</a>
            </li>
            <li :class="{ active: isActiveSection(3) }">
              <a href="#section3" @click="scrollToSection(3)">店铺排行</a>
            </li>
            <li :class="{ active: isActiveSection(4) }">
              <a href="#section4" @click="scrollToSection(4)">库存分析</a>
            </li>
            <li :class="{ active: isActiveSection(5) }">
              <a href="#section5" @click="scrollToSection(5)">地区排行</a>
            </li>
          </ul> -->
        </nav>
      </el-col>
      <el-col :span="7">
        <date
          v-model="valueTime"
          :type.sync="groupType"
          @handleChangeTime="handleChangeTime($event)"
        ></date>
      </el-col>
      <!-- <timeSearch @getDateArr="getDateArr" @changDay="changDay" :timeArr="timeArr" :dayActive="this.dayActive"
        :dayLimit="1095" /> -->
    </el-row>

    <!-- <section id="section1">
      <el-row
        style="background: #fff; padding: 20px 16px 0; margin-bottom: 32px"
      >
        <h4
          style="
            font-weight: 500;
            color: #666;
            margin-left: 5px;
            margin-top: 25px;
          "
        >
          <i class="el-icon-s-data" style="margin-right: 5px" />销售总览
        </h4>
        <panel-group
          @handleSetLineChartData="handleSetLineChartData"
          :biNumberOfItem="this.biNumberOfItem"
          :biNumberItem="this.biNumberItem"
        />
      </el-row>
      
      <el-row
        style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
      >
        <chartData :chart-data="echartData" />
      </el-row>
    </section> -->
    <!-- <section>
      <el-card>
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="" prop="firstLevelColumn">
            <el-select
              v-model="queryParams.firstLevelColumn"
              placeholder="请选择一级类目"
              clearable
              multiple
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_pl"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="secondLevelColumn">
            <el-select
              v-model="queryParams.secondLevelColumn"
              placeholder="请选择三级类目"
              clearable
              multiple
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_cycle"
                :key="dict.label"
                :label="dict.label"
                :value="dict.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="productSeason">
            <el-select
              v-model="queryParams.productSeason"
              placeholder="请选择商品-季节"
              clearable
              multiple
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_jijie"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="designFabricName">
            <el-select
              v-model="queryParams.designFabricName"
              clearable
              multiple
              filterable
              placeholder="主面料名称"
              @keyup.enter.native="handleQuery"
            >
              <el-option
                v-for="(item, index) in mianliao"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="operationLevel">
            <el-select
              v-model="queryParams.operationLevel"
              placeholder="请选择运营-层级"
              clearable
              multiple
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_level"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              >导出</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>

          <el-form-item label="" prop="newProStartTime">
            <timeSearch
              @getDateArr="getDateArr"
              @changDay="changDay"
              :timeArr="timeArr"
              :dayActive="this.dayActive"
              :dayLimit="1095"
            />
          </el-form-item>
          <br />
          <el-form-item label="" prop="operationMainProducts">
            <el-input
              v-model="queryParams.operationMainProducts"
              placeholder="商品-主推款"
              clearable
              @keyup.enter.native="handleQuery"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="" prop="isNewList">
            <el-select
              v-model="queryParams.isNewList"
              placeholder="新老品"
              clearable
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_sale_view"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
    </section> -->

    <!-- <section id="section1">    
      <el-row :gutter="10" style="padding: 16px 0">
        <el-col :span="24">         
          <el-card>
            <div
              slot="header"
              style="display: flex; justify-content: space-between"
            >
              <span><i class="el-icon-collection"></i> 商品排行榜</span>
              <el-select
                v-model="queryParams.itemType"
                placeholder="产品视角"
                clearable
                @change="changeView"
              >
                <el-option
                  v-for="dict in dict.type.sys_product_view.slice(2, 6)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                />
              </el-select>
            </div>
            <el-table
              :maxHeight="ItemDateList.length ? tableHeight : 'auto'"
              :data="ItemDateList"
              highlight-current-row
              style="width: 100%"
              ref="table"
              @cell-click="goodstableEdit"
            >
              
              <el-table-column
                width="60"
                label="排名"
                type="index"
              ></el-table-column>
              <el-table-column
                width="60"
                label="产品图"
                align="center"
                prop="picUrl"
                ><template slot-scope="scope">
                  <el-popover
                    effect="light"
                    trigger="click"
                    placement="left"
                    width="auto"
                    v-show="scope.row.picUrl"
                  >
                    <template #default>
                      <img
                        :src="pjtUrl + scope.row.picUrl"
                        style="width: 800px; height: 600px; object-fit: contain"
                      />
                    </template>
                    <template #reference>
                      <img
                        :src="pjtUrl + scope.row.picUrl"
                        style="width: 20px; height: 20px; object-fit: contain"
                      />
                    </template>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="颗粒度" align="center" prop="itemGrade">
                <template slot-scope="scope">
                  <div
                    v-if="queryParams.itemType == 'item'"
                    style="
                      color: rgb(37, 137, 255);
                      cursor: pointer;
                      text-decoration: underline;
                    "
                    @click="gotoSku(scope.row)"
                  >
                    {{ scope.row.itemGrade }}
                  </div>
                  <span v-else>{{ scope.row.itemGrade }}</span>
                  
                </template>
              </el-table-column>
              <el-table-column
                label="销售金额"
                align="center"
                prop="salesAmount"
              >
                <template slot-scope="scope">
                  {{ scope.row.salesAmount }}
                </template>
              </el-table-column>
              
              <el-table-column
                width="100"
                label="退款金额"
                align="center"
                prop="returnAmount"
              />
              <el-table-column
                width="100"
                label="净销售额"
                align="center"
                prop="netSalesAmount"
              ></el-table-column>

              <el-table-column
                width="100"
                label="综合退货率"
                align="center"
                prop="comprehensiveReturnRate"
              >
                <template slot-scope="scope">
                  <div>
                    {{ (scope.row.comprehensiveReturnRate * 100).toFixed(2) }}%
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                width="100"
                label="总销售件数"
                align="center"
                prop="totalSalesNumber"
              ></el-table-column>

              <el-table-column
                width="100"
                label="净销售件数"
                align="center"
                prop="netSalesNumber"
              />
              <el-table-column
                width="100"
                label="毛利额"
                align="center"
                prop="grossProfit"
              />
              <el-table-column
                width="100"
                label="毛利率"
                align="center"
                prop="grossProfitRate"
              >
                <template slot-scope="scope">
                  <div>{{ (scope.row.grossProfitRate * 100).toFixed(2) }}%</div>
                </template>
              </el-table-column>
              <el-table-column
                width="100"
                label="发货前退货数"
                align="center"
                prop="returnBeforeShipmentNumber"
              />
              <el-table-column
                width="100"
                label="发货后退货数"
                align="center"
                prop="returnAfterShipmentNumber"
              />
              <el-table-column
                width="100"
                label="总退货件数"
                align="center"
                prop="totalReturnNumber"
              />
              <el-table-column
                width="100"
                label="库存"
                align="center"
                prop="endingInventory"
              />
              <el-table-column
                width="100"
                label="采购在途"
                align="center"
                prop="salesGrossProfit"
              />
              <el-table-column
                width="100"
                label="SD单件数"
                align="center"
                prop="sdNumber"
              />
              <el-table-column
                width="100"
                label="MJX单件数"
                align="center"
                prop="mjxNumber"
              />
              <el-table-column
                width="100"
                label="可售天数"
                align="center"
                prop="saleDays"
              />
              <el-table-column
                width="100"
                label="上新时间"
                align="center"
                prop="newTime"
              />
              <el-table-column
                width="100"
                label="是否新品"
                align="center"
                prop="isNew"
              />
              <el-table-column
                width="100"
                label="售罄率"
                align="center"
                prop="exhaustionRate"
              >
                <template slot-scope="scope">
                  <div>{{ (scope.row.exhaustionRate * 100).toFixed(2) }}%</div>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card>
            <div slot="header">
              <span><i class="el-icon-pie-chart"></i> 渠道排行分析</span>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <div ref="usedmemory" style="height: 380px" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section> -->
    <!-- @selection-change="handleSelectionChange" -->

    <!-- <section id="section3" style="margin-bottom: 32px">
      <el-card>
        <div
          slot="header"
          style="display: flex; justify-content: space-between"
        >
          <span><i class="el-icon-collection"></i> 品类排行榜</span>
          <timeSearch
            @getDateArr="getDateArr"
            @changDay="changDay"
            :timeArr="timeArr"
            :dayActive="this.dayActive"
            :dayLimit="1095"
          />
        </div>
        <u-table
          ref="plTreeTable"
          fixed-columns-roll
          beautify-table
          header-drag-style
          :data="PartWordList"
          :height="height"
          :treeConfig="{
            children: 'list',
            iconClose: 'el-icon-folder-add',
            iconOpen: 'el-icon-folder-remove',
            expandAll: false,
          }"
          @toggle-tree-expand="toggleTreeExpand"
          use-virtual
          row-id="rootNode"
          border
          @cell-click="productEdit"
        >
          <u-table-column
            :tree-node="true"
            prop="rootNode"
            label="品类"
            :width="200"
            fixed
          />

          <u-table-column
            v-for="item in columns"
            align="center"
            :key="item.id"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
          >
            <template slot-scope="scope">
              {{ scope.row[item.prop]
              }}<span v-if="item.label.includes('率')">%</span>
            </template>
          </u-table-column>
        </u-table>
      </el-card>
    </section> -->

    <!-- <el-table
          v-loading="loading"
          :data="PartWordList"
          @cell-click="tableEdit"
        >
          <el-table-column
            label="划分词"
            align="center"
            prop="label"
            width="130"
            :show-overflow-tooltip="true"
            fixed
          />

          <el-table-column
            label="访客数"
            align="center"
            prop="visitors"
            width="100"
          />
          <el-table-column label="访客%" align="center" prop="visitorRate">
            <template slot-scope="scope">
              {{ scope.row.visitorRate }}%
            </template>
          </el-table-column>
          <el-table-column
            label="环比访客"
            align="center"
            prop="chainVisitors"
          />
          <el-table-column
            label="访客变化"
            align="center"
            prop="visitorChange"
          />
          <el-table-column
            label="访客环比%"
            align="center"
            prop="visitorChain"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.visitorChain }}%
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="支付金额"
            align="center"
            prop="payAmount"
          />
          <el-table-column label="金额%" align="center" prop="payAmountRate">
            <template slot-scope="scope">
              {{ scope.row.payAmountRate }}%
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="环比金额"
            align="center"
            prop="chainPayAmount"
          />
          <el-table-column
            width="100"
            label="金额变化"
            align="center"
            prop="payAmountChange"
          />
          <el-table-column
            width="100"
            label="金额环比%"
            align="center"
            prop="payAmountChain"
          >
            <template slot-scope="scope">
              {{ scope.row.payAmountChain }}%
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="支付转化率"
            align="center"
            prop="payConversionRate"
          >
            <template slot-scope="scope">
              {{ scope.row.payConversionRate }}%
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="环比转化率"
            align="center"
            prop="chainPayConversionRate"
          >
            <template slot-scope="scope">
              {{ scope.row.chainPayConversionRate }}%
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="转化率环比%"
            align="center"
            prop="payConversionRateChain"
          >
            <template slot-scope="scope">
              {{ scope.row.payConversionRateChain }}%
            </template>
          </el-table-column>
          <el-table-column
            label="加购人数"
            align="center"
            prop="addPurchasePeoNum"
          />
          <el-table-column
            label="环比加购"
            align="center"
            prop="chainAddPurchase"
          />
          <el-table-column
            label="加购变化"
            align="center"
            prop="addPurchaseChange"
          />
          <el-table-column
            label="加购率"
            align="center"
            prop="addPurchaseRate"
          />
          <el-table-column
            label="客单价"
            align="center"
            prop="customerUnitPrice"
          />
          <el-table-column
            :render-header="renderheader"
            :label="'支付\n买家数'"
            align="center"
            prop="payBuyers"
          />
          <el-table-column
            width="100"
            label="下单金额"
            align="center"
            prop="orderAmount"
          />
          <el-table-column
            width="100"
            label="下单买家数"
            align="center"
            prop="orderBuyers"
          />
          <el-table-column
            width="100"
            label="下单转化率"
            align="center"
            prop="orderConversionRate"
          >
            <template slot-scope="scope">
              {{ scope.row.orderConversionRate }}%
            </template>
          </el-table-column>

          <el-table-column label="UV价值" align="center" prop="uvValue" />

          <el-table-column
            :render-header="renderheader"
            :label="'关注\n店铺人数'"
            align="center"
            prop="shopAttentionNum"
          />
          <el-table-column
            :render-header="renderheader"
            :label="'收藏商品\n买家数'"
            align="center"
            prop="collectGoodsBuyers"
          />

          <el-table-column
            width="100"
            :render-header="renderheader"
            :label="'直接\n支付买家数'"
            align="center"
            prop="directPayBuyers"
          />
          <el-table-column
            width="100"
            :render-header="renderheader"
            :label="'收藏商品\n支付买家数'"
            align="center"
            prop="collectGoodsPaidBuyers"
          />
          <el-table-column
            width="100"
            :render-header="renderheader"
            :label="'粉丝\n支付买家数'"
            align="center"
            prop="buyersPaidFans"
          />
          <el-table-column
            width="100"
            :render-header="renderheader"
            :label="'加购商品\n支付买家数'"
            align="center"
            prop="addPurchasesBuyersPaid"
          />
          <el-table-column
            label="新访客数"
            align="center"
            prop="newVisitorNum"
          />
        </el-table> -->
    <!-- <section>
      <el-card>
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="" prop="firstLevelColumn">
            <el-select
              v-model="queryParams.firstLevelColumn"
              placeholder="请选择一级类目"
              clearable
              multiple
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_pl"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="firstLevelExtendedColumn">
            <el-select
              v-model="queryParams.firstLevelExtendedColumn"
              placeholder="请选择二级类目"
              clearable
            >
              <el-option
                v-for="dict in dict.type.sys_product_secondary"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="secondLevelColumn">
            <el-select
              v-model="queryParams.secondLevelColumn"
              placeholder="请选择三级类目"
              clearable
              multiple
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_cycle"
                :key="dict.label"
                :label="dict.label"
                :value="dict.label"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              >导出</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>

          <el-form-item label="" prop="newProStartTime">
            <dayTime
              @getDateArr="getDateArrTime"
              @changDay="changDayTime"
              :timeArr="timeArrTime"
              :dayActive="this.dayActiveTime"
              :dayLimit="1095"
            />
          </el-form-item>
          <br />
          <el-form-item label="" prop="productSeason">
            <el-select
              v-model="queryParams.productSeason"
              placeholder="请选择商品-季节"
              clearable
              multiple
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_jijie"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="" prop="operationLevel">
            <el-select
              v-model="queryParams.operationLevel"
              placeholder="请选择运营-层级"
              clearable
              multiple
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_level"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="" prop="isNewList">
            <el-select
              v-model="queryParams.isNewList"
              placeholder="新老品"
              clearable
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_sale_view"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
    </section> -->

    <section id="section1" style="margin-bottom: 16px">
      <el-card>
        <div
          slot="header"
          style="display: flex; justify-content: space-between"
        >
          <span><i class="el-icon-collection"></i> 店铺分析排行榜</span>
          <!-- <el-select
            v-model="queryParams.itemType"
            placeholder="产品视角"
            clearable
            @change="changeView"
          >
            <el-option
              v-for="dict in dict.type.sys_product_itemtype"
              :key="dict.value"
              :label="dict.label"
              :value="dict.label"
            />
          </el-select> -->
        </div>
        <!-- <div ref="tableDom"> :maxHeight="BiKeywordDwdList.length ? tableHeight : 'auto'"-->
        <el-table
          v-loading="loading"
          :data="BiKeywordDwdList"
          @cell-click="tableEdit"
          @sort-change="handleSortChange"
          :height="itemHeight"
        >
          <!-- <el-table-column
            width="140"
            label="日期"
            align="center"
            prop="dataDate"
          >
          </el-table-column> -->
          <el-table-column
            width="140"
            label="商品ID"
            align="center"
            prop="productId"
          >
          </el-table-column>
          <el-table-column
            width="140"
            label="店铺名称"
            align="center"
            prop="shopName"
          >
          </el-table-column>
          <el-table-column
            sortable
            width="140"
            label="交易金额"
            align="center"
            prop="payAmount"
          />
          <el-table-column
            sortable
            width="140"
            label="访客数"
            align="center"
            prop="visitors"
          />
          <el-table-column
            sortable
            width="140"
            label="搜索人数"
            align="center"
            prop="searchCount"
          />
          <el-table-column
            sortable
            width="140"
            label="收藏人数"
            align="center"
            prop="collectionCount"
          />
          <el-table-column
            sortable
            width="140"
            label="加购人数"
            align="center"
            prop="addPurchasesPeoNum"
          />
          <el-table-column
            sortable
            width="140"
            label="支付转化率"
            align="center"
            prop="payConversionRate"
          >
            <template slot-scope="scope">
              <div>
                {{
                  scope.row.payConversionRate
                    ? scope.row.payConversionRate + "%"
                    : ""
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            sortable
            width="140"
            label="支付买家数"
            align="center"
            prop="paidBuyerCount"
          />
          <el-table-column
            sortable
            width="140"
            label="UV价值"
            align="center"
            prop="uvValue"
          />
          <el-table-column
            sortable
            width="140"
            label="客单价"
            align="center"
            prop="averageCustomerValue"
          />
          <el-table-column
            sortable
            width="140"
            label="搜索占比"
            align="center"
            prop="searchShare"
          />
          <el-table-column
            sortable
            width="140"
            label="收藏率"
            align="center"
            prop="collectionRate"
          >
            <template slot-scope="scope">
              <div>
                {{
                  scope.row.collectionRate ? scope.row.collectionRate + "%" : ""
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            sortable
            width="140"
            label="加购率"
            align="center"
            prop="addToCartRate"
          >
            <template slot-scope="scope">
              <div>
                {{
                  scope.row.addToCartRate ? scope.row.addToCartRate + "%" : ""
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            sortable
            width="140"
            label="收藏加购率"
            align="center"
            prop="collectionAddCartRate"
          >
            <template slot-scope="scope">
              <div>
                {{
                  scope.row.collectionAddCartRate
                    ? scope.row.collectionAddCartRate + "%"
                    : ""
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            width="140"
            label="总收藏加购人数"
            align="center"
            prop="totalCollectionAddCarts"
          />

          <el-table-column
            width="140"
            label="金额占比"
            align="center"
            prop="payAmountProportion"
          />
          <el-table-column
            width="140"
            label="访客占比"
            align="center"
            prop="visitorsProportion"
          />
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-card>
    </section>
    <!-- <el-table-column
              width="100"
              label="环比金额"
              align="center"
              prop="chainPayAmount"
            />
            <el-table-column
              width="100"
              label="金额变化"
              align="center"
              prop="payAmountChange"
            />
            <el-table-column
              width="100"
              label="金额环比%"
              align="center"
              prop="payAmountChain"
            >
              <template slot-scope="scope">
                {{ scope.row.payAmountChain }}%
              </template>
            </el-table-column>
            <el-table-column
              label="商品访客数"
              align="center"
              prop="visitors"
              width="100"
            />

            <el-table-column
              width="100"
              label="环比访客数"
              align="center"
              prop="chainVisitors"
            />
            <el-table-column
              label="访客变化"
              align="center"
              prop="visitorChange"
            />
            <el-table-column
              label="访客环比%"
              align="center"
              prop="visitorChain"
              width="100"
            >
              <template slot-scope="scope">
                {{ scope.row.visitorChain }}%
              </template>
            </el-table-column>
            <el-table-column
              width="100"
              label="转化率"
              align="center"
              prop="payConversionRate"
            >
              <template slot-scope="scope">
                {{ scope.row.payConversionRate }}%
              </template>
            </el-table-column>
            <el-table-column
              width="100"
              label="环比转化率"
              align="center"
              prop="chainPayConversionRate"
            >
              <template slot-scope="scope">
                {{ scope.row.chainPayConversionRate }}%
              </template>
            </el-table-column>
            <el-table-column
              width="100"
              label="转化率环比%"
              align="center"
              prop="payConversionRateChain"
            >
              <template slot-scope="scope">
                {{ scope.row.payConversionRateChain }}%
              </template>
            </el-table-column>
            <el-table-column
              width="120"
              label="支付件数"
              align="center"
              prop="payProNum"
            />
            <el-table-column
              width="120"
              label="支付买家数"
              align="center"
              prop="payBuyers"
            />
            <el-table-column
              width="120"
              label="商品加购件数"
              align="center"
              prop="addPurchasesNum"
            />
            <el-table-column
              width="100"
              label="商品加购率"
              align="center"
              prop="addPurchasePeoNum"
            />

            <el-table-column
              label="加购变化"
              align="center"
              prop="addPurchaseChange"
            />
            <el-table-column
              width="120"
              label="推广花费"
              align="center"
              prop="promotionCost"
            />
            <el-table-column
              width="120"
              label="花费变化"
              align="center"
              prop="promotionCost"
            />
            <el-table-column
              width="120"
              label="品类费比"
              align="center"
              prop="promotionCost"
            />
            <el-table-column
              width="120"
              label="费比变化"
              align="center"
              prop="promotionCost"
            />
            <el-table-column
              width="120"
              label="总点击量"
              align="center"
              prop="promotionClicks"
            />
            <el-table-column
              width="120"
              label="点击变化"
              align="center"
              prop="promotionCost"
            />
            <el-table-column
              width="120"
              label="推广点击%"
              align="center"
              prop="promotionClicks"
            />
            <el-table-column
              width="120"
              label="成功退款金额"
              align="center"
              prop="successReturnAmount"
            />
            <el-table-column
              width="120"
              label="退货率"
              align="center"
              prop="returnRate"
            />
            <el-table-column
              width="120"
              label="退货率变化"
              align="center"
              prop="returnRate"
            />
            <el-table-column
              width="120"
              label="总库存"
              align="center"
              prop="returnRate"
            /> -->
    <!-- <el-table-column
            label="访客数"
            align="center"
            prop="visitors"
            width="100"
          />
          <el-table-column label="访客%" align="center" prop="visitorRate">
            <template slot-scope="scope">
              {{ scope.row.visitorRate }}%
            </template>
          </el-table-column>
          <el-table-column
            label="环比访客"
            align="center"
            prop="chainVisitors"
          />
          <el-table-column
            label="访客变化"
            align="center"
            prop="visitorChange"
          />
          <el-table-column
            label="访客环比%"
            align="center"
            prop="visitorChain"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.visitorChain }}%
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="支付金额"
            align="center"
            prop="payAmount"
          />
          <el-table-column label="金额%" align="center" prop="payAmountRate">
            <template slot-scope="scope">
              {{ scope.row.payAmountRate }}%
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="环比金额"
            align="center"
            prop="chainPayAmount"
          />
          <el-table-column
            width="100"
            label="金额变化"
            align="center"
            prop="payAmountChange"
          />
          <el-table-column
            width="100"
            label="金额环比%"
            align="center"
            prop="payAmountChain"
          >
            <template slot-scope="scope">
              {{ scope.row.payAmountChain }}%
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="支付转化率"
            align="center"
            prop="payConversionRate"
          >
            <template slot-scope="scope">
              {{ scope.row.payConversionRate }}%
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="环比转化率"
            align="center"
            prop="chainPayConversionRate"
          >
            <template slot-scope="scope">
              {{ scope.row.chainPayConversionRate }}%
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="转化率环比%"
            align="center"
            prop="payConversionRateChain"
          >
            <template slot-scope="scope">
              {{ scope.row.payConversionRateChain }}%
            </template>
          </el-table-column>
          <el-table-column
            label="加购人数"
            align="center"
            prop="addPurchasesPeoNum"
          />
          <el-table-column
            label="环比加购"
            align="center"
            prop="chainAddPurchase"
          />
          <el-table-column
            label="加购变化"
            align="center"
            prop="addPurchaseChange"
          />
          <el-table-column
            label="加购率"
            align="center"
            prop="addPurchaseRate"
          />

          <el-table-column
            width="120"
            label="支付买家数"
            align="center"
            prop="payBuyers"
          />
          <el-table-column
            width="120"
            label="支付件数"
            align="center"
            prop="payProNum"
          />
          <el-table-column
            width="120"
            label="支付新买家数"
            align="center"
            prop="payNewBuyers"
          />
          <el-table-column
            width="120"
            label="支付老买家数"
            align="center"
            prop="payOldBuyers"
          />
          <el-table-column
            width="120"
            label="老买家支付金额"
            align="center"
            prop="oldBuyerPayAmount"
          />
          <el-table-column
            width="120"
            label="成功退款金额"
            align="center"
            prop="successReturnAmount"
          />
          <el-table-column
            width="120"
            label="推广花费"
            align="center"
            prop="promotionCost"
          />
          <el-table-column
            width="120"
            label="推广点击量"
            align="center"
            prop="promotionClicks"
          /> -->

    <!-- </div> -->

    <section style="margin-bottom: 16px">
      <el-card>
        <div
          slot="header"
          style="display: flex; justify-content: space-between"
        >
          <span><i class="el-icon-collection"></i> 竞品分析明细</span>
        </div>
        <panel-group
          @handleSetLineChartData="handleSetLineChartData"
          :itemData="itemData"
        />
      </el-card>
    </section>

    <section style="margin-bottom: 16px">
      <el-card>
        <div
          slot="header"
          style="display: flex; justify-content: space-between"
        >
          <span><i class="el-icon-collection"></i> 竞品分析趋势</span>
        </div>
        <chartData :chart-data="echartDataI" />
      </el-card>
    </section>

    <section style="margin-bottom: 16px">
      <el-card>
        <div
          slot="header"
          style="display: flex; justify-content: space-between"
        >
          <span><i class="el-icon-collection"></i> 竞品分析趋势</span>
        </div>
        <el-row :gutter="20" class="data_section">
          <el-col :span="24">
            <!-- <div class="addBtn" @click="addLibraryIdList">
            <div class="el-icon-plus">新增条件</div>
          </div> -->
            <el-col :span="21">
              <el-button type="primary" size="mini" @click="addLibraryIdList"
                >新增</el-button
              >
              <el-button
                type="primary"
                size="mini"
                @click="selectKeyWordStatisticsEchartsII"
                >查询</el-button
              >
            </el-col>
            <el-col :span="3">
              <!-- <span style="font-weight: 600">{{ itemType }}</span> -->
              <el-select
                v-model="queryParams.property"
                placeholder="商品ID属性"
                filterable
                @change="selectKeyWordStatisticsEchartsII"
              >
                <el-option
                  v-for="item in itemType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-col>
        </el-row>
        <el-form ref="form" :model="formData" label-position="top">
          <div>
            <!-- <div class="module-table-name mb15">
          <span>基础条件选择</span>
        </div> 
       
      -->
            <div class="flex_row" style="display: flex; flex-direction: row">
              <div
                v-for="(item, index) in formData.libraryIdList"
                :key="index"
                class="fx_5"
              >
                <el-form-item style="display: flex; flex-direction: row">
                  <el-select
                    v-model="item.id"
                    placeholder="商品ID展示"
                    filterable
                    @change="keywordListlength"
                    allow-create
                    default-first-option
                    remote
                    :remote-method="getselectKeyWordList"
                  >
                    <!--
                         width="100"
                        :popper-append-to-body="false"
                         remote
                      :remote-method="getselectKeyWordList" -->
                    <!-- <div>
                        
                      </div> -->
                    <!--allow-create
                      default-first-option
                         @blur="blurInput($event)" -->
                    <!-- <el-input
                        v-model="item.id"
                        placeholder="请输入"
                      ></el-input> -->
                    <el-option
                      v-for="libraryItem in libraryOptions"
                      :key="libraryItem"
                      :label="libraryItem"
                      :value="libraryItem"
                    >
                    </el-option>
                  </el-select>

                  <span
                    v-if="formData.libraryIdList.length > 1"
                    @click="delRow(item, index)"
                  >
                    <el-button
                      type="danger"
                      size="mini"
                      class="el-icon-delete"
                    ></el-button>
                  </span>
                  <span v-if="index !== formData.libraryIdList.length - 1">
                    VS
                  </span>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
        <!-- <el-row> -->
        <!-- {{ pjtUrl + itemData.picUrl }}-->
        <!-- {{ itemData.picFullUrl }} -->
        <!-- style="width: 150px" -->
        <!-- {{ productNo }} -->
        <!-- <div style="">
            <span>
              商品ID：<el-select
                v-model="productNo"
                clearable
                filterable
                remote
                :remote-method="getDatas"
                placeholder="请输入"
                @change="testAdd"
              >
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </span>
          </div> -->

        <!-- <panel-group-i
          @handleSetLineSkuData="handleSetLineSkuData"
          :itemData="itemData"
        /> -->
        <!-- </el-col> -->
        <!-- </el-row> -->
        <!-- <el-row style="background: #fff; padding: 32px 32px">
        <chartData :chart-data="echartDataI" />
      </el-row> -->
        <el-row
          style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
        >
          <!-- <chartDataI :echartDataSku="echartDataSku" /> -->
          <!-- <Echart
          :chartData="echartsData.order"
          style="height: 380px; width: 100%" ,width:1500px
        ></Echart> -->
          <!-- <el-card style="height: 280px"> -->
          <div
            style="margin-left: 2px; margin-right: 2px; height: 460px"
            ref="echarts"
          ></div>
          <!-- <Echart :chartData="echartsData.order" style="height: 280px"></Echart> -->
          <!-- </el-card> -->
        </el-row>
      </el-card>
    </section>

    <!-- <section id="section2">
      <el-row
        style="background: #fff; padding: 0px 16px 0; margin-bottom: 32px"
      >
        
        <h4
          style="
            font-weight: 500;
            color: #666;
            margin-left: 5px;
            margin-top: 25px;
          "
        >
          <span
            ><i
              class="el-icon-s-data"
              style="margin-right: 5px"
            />趋势分析</span
          >
          <span style="margin-left: 700px">款号：{{ productNo }}</span>
        </h4>

        <chartData :chart-data="echartDataI" />
      </el-row>
    </section> -->

    <!-- <section id="section2">
      <el-row :gutter="10" style="background: #fff; padding: 16px 16px">
        <el-col :span="12">         
          <el-card>
            <div
              slot="header"
              style="display: flex; justify-content: space-between"
            >
              <span><i class="el-icon-collection"></i> skc分析</span>
              
            </div>
            
            <el-table
              :maxHeight="skcitemData.length ? tableHeight : 'auto'"
              :data="skcitemData"
              :height="pageHeight"
              highlight-current-row
              style="width: 100%"
              
            >
              
              <el-table-column
                width="110"
                label="spu"
                align="center"
                prop="spu"
              ></el-table-column>
              <el-table-column
                width="125"
                label="skc"
                align="center"
                prop="skc"
              ></el-table-column>
              <el-table-column
                width="90"
                label="颜色"
                align="center"
                prop="colorProperty"
              />
              <el-table-column
                width="90"
                label="库存"
                align="center"
                prop="endingInventory"
              />
              <el-table-column
                width="90"
                label="采购在途"
                align="center"
                prop="salesGrossProfit"
              />
              <el-table-column
                width="90"
                label="销量"
                align="center"
                prop="netSalesNumber"
              />
              <el-table-column
                width="90"
                label="净销售额"
                align="center"
                prop="netSalesAmount"
              ></el-table-column>
              <el-table-column
                width="90"
                label="可售天数"
                align="center"
                prop="saleDays"
              ></el-table-column>
            </el-table>
            
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div
              slot="header"
              style="display: flex; justify-content: space-between"
            >
              <span><i class="el-icon-pie-chart"></i> 颜色库销比</span>
              <el-button type="primary" @click="selectAll"
                >查看完整数据</el-button
              >
            </div>
            <div
              class="el-table el-table--enable-row-hover el-table--medium chart-container"
            >
              <MixChart
                :id="'MixChart'"
                :chartData="echartData"
                @SetLineChartData="SetLineChartData"
                height="410px"
                width="830px"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <section id="section2">
      
      <el-row :gutter="10" style="background: #fff; padding: 20px 16px 0">
        <el-col :span="12">
          <el-card style="height: calc(100vh - 500px)">
            <div slot="header">
              <span><i class="el-icon-collection"></i> 颜色分析</span>
            </div>
            <el-table
              :data="skuitemData"
              :height="pageHeight"
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column
                width="110"
                label="spu"
                align="center"
                prop="spu"
              ></el-table-column>
              
              <el-table-column
                width="110"
                label="颜色"
                align="center"
                prop="colorProperty"
              />
              <el-table-column
                width="110"
                label="尺码 "
                align="center"
                prop="proSize"
              ></el-table-column>
              <el-table-column
                width="90"
                label="库存"
                align="center"
                prop="endingInventory"
              />
              <el-table-column
                width="90"
                label="采购在途"
                align="center"
                prop="salesGrossProfit"
              />
              <el-table-column
                width="90"
                label="销量"
                align="center"
                prop="netSalesNumber"
              />
              <el-table-column
                width="90"
                label="净销售额"
                align="center"
                prop="netSalesAmount"
              ></el-table-column>
              <el-table-column
                width="90"
                label="可售天数"
                align="center"
                prop="saleDays"
              ></el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div slot="header">
              <span><i class="el-icon-pie-chart"></i> 尺码库销比</span>
            </div>
            <div
              class="el-table el-table--enable-row-hover el-table--medium chart-container"
            >
              <MinChart
                :id="'MinChart'"
                :minchartData="echartDataMin"
                height="410px"
                width="830px"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section> -->
    <!-- 添加或修改产品一级信息对话框  @close="handleClose"-->
    <el-dialog
      :visible.sync="open"
      width="95%"
      height="100%"
      append-to-body
      v-if="open"
      @close="handleClose"
    >
      <div class="el-dialog-div">
        <MixChart
          :id="'MixAllChart'"
          :chartData="echartData"
          @SetLineChartData="SetLineChartData"
          :height="'50%'"
          :width="'100%'"
        />
        <MinChart
          :id="'MinAllChart'"
          :minchartData="echartDataMin"
          :height="'50%'"
          :width="'100%'"
        />
      </div>
    </el-dialog>
    <!-- <tendency :sevenDate='sevenDate' :sevenDay='sevenDay'></tendency> -->
  </div>
</template>

<script>
import Echart from "./components/ECharts.vue";
import {
  listBiKeywordDwd,
  getBiKeywordDwd,
  delBiKeywordDwd,
  addBiKeywordDwd,
  updateBiKeywordDwd,
  selectByConditionList,
  selectPartWordList,
  selectKeyWordStatistics,
  comparisonStatistics,
  selectKeyWordList,
} from "@/api/keyword/BiKeywordDwd";
import * as echarts from "echarts";
import date from "./day/date.vue";
import day from "./day/day.vue";
import chartDataI from "./components/chartDataI";
import chartData from "./components/chartData";
import timeSearch from "./day/day.vue";
import dayTime from "./day/dayTime.vue";
// import GithubCorner from '@/components/GithubCorner'
import PanelGroup from "./components/PanelGroup";
import PanelGroupI from "./components/PanelGroupI";
// import LineChart from './components/LineChart'
import {
  itemSaleData,
  skcByItemSaleList,
  queryContentByKey,
  selectItemStatistics,
  skuBySkcSaleList,
} from "@/api/sku/sku";
// queryContentByKey,
// selectItemStatistics,
// src\views\example\Charts\MixChart.vue
import MixChart from "@/views/sku/Chart/MixChart.vue";
import MinChart from "@/views/sku/Charts/MinChart.vue";

import { listBrandChannelShop, listAll } from "@/api/chart/brandChannelShop";
import {
  // 数据级别排行
  selectGradeList,
  // 数据总览
  selectProductData,
  // 数据排行
  selectProductMarketingRank,
  // 单品多指标趋势图
  selectProductStatistics,
  // 多商品单指标对比
  comparisonStatisticsPro,
  selectCompetitorShopRank,
  selectCompetitorShopStatistics,
} from "@/api/marketing/BiCompetitiveProDwd";

export default {
  name: "Admin",
  dicts: [
    "sys_product_view",
    "sys_product_qudao",
    "sys_product_size",
    "sys_product_design",
    "sys_product_scene",
    "sys_product_coder",
    "sys_product_yf",
    "sys_product_cycle",
    "sys_product_pl",
    "sys_product_jijie",
    "sys_product_level",
    "sys_sale_view",
    "sys_product_itemtype",
    "sys_product_secondary",
  ],
  components: {
    Echart,
    // skc
    MixChart,

    // sku
    MinChart,
    // GithubCorner,
    PanelGroup,
    PanelGroupI,
    // LineChart,

    // RaddarChart,
    // PieChart,
    // BarChart,

    chartData,
    chartDataI,
    // TransactionTable,
    // TodoList,
    // BoxCard
    timeSearch,
    date,
    day,
    dayTime,
  },
  data() {
    return {
      itemHeight: window.innerHeight - 580,
      height: 400,
      columnsItem: [
        {
          prop: "chainVisitors",
          id: 2,
          label: "环比访客",
          width: 135,
        },
        {
          prop: "visitorsChange",
          id: 3,
          label: "访客变化",
          width: 135,
        },
        {
          prop: "visitorsChain",
          id: 4,
          label: "访客占比",
          width: 135,
        },
        {
          prop: "payConversionRate",
          id: 5,
          label: "支付转化率",
          width: 135,
        },
        {
          prop: "chainPayConversionRate",
          id: 6,
          label: "环比转化率",
          width: 135,
        },
        {
          prop: "payConversionRateChange",
          id: 7,
          label: "支付转化率变化",
          width: 135,
        },

        {
          prop: "chainPayAmount",
          id: 9,
          label: "环比支付金额",
          width: 135,
        },
        {
          prop: "payAmountChange",
          id: 10,
          label: "支付金额变化",
          width: 135,
        },
        {
          prop: "payAmountChain",
          id: 11,
          label: "金额环比%",
          width: 135,
        },
        {
          prop: "addtocartUsers",
          id: 12,
          label: "加购人数",
          width: 135,
        },
        {
          prop: "addPurchasesChange",
          id: 13,
          label: "加购变化",
          width: 135,
        },
        // {
        //   prop: "addPurchasesRate",
        //   id: 14,
        //   label: "加购率",
        //   width: 135,
        // },
        // {
        //   prop: "promotionCost",
        //   id: 15,
        //   label: "推广花费",
        //   width: 135,
        // },
        // {
        //   prop: "promotionClicks",
        //   id: 16,
        //   label: "推广点击量",
        //   width: 135,
        // },
        {
          prop: "avgCartValue",
          id: 17,
          label: "客单价",
          width: 135,
        },
        {
          prop: "uvValue",
          id: 18,
          label: "UV价值",
          width: 135,
        },
        {
          prop: "successReturnAmount",
          id: 23,
          label: "成功退款金额",
          width: 135,
        },
        {
          prop: "tbUserCommission",
          id: 24,
          label: "淘宝客佣金",
          width: 135,
        },
      ],
      columns: [
        {
          prop: "visitors",
          id: 1,
          label: "访客数",
          width: 135,
        },
        {
          prop: "paymentAmount",
          id: 8,
          label: "支付金额",
          width: 135,
        },
        {
          prop: "oldVisitors",
          id: 19,
          label: "老访客数",
          width: 135,
        },
        {
          prop: "newVisitors",
          id: 20,
          label: "新访客数",
          width: 135,
        },
        {
          prop: "oldPaidCustomers",
          id: 21,
          label: "支付老买家数",
          width: 135,
        },
        {
          prop: "oldCustomerPaidAmount",
          id: 22,
          label: "老买家支付金额",
          width: 135,
        },

        {
          prop: "addtocartItems",
          id: 25,
          label: "加购件数",
          width: 135,
        },
        {
          prop: "paidCustomers",
          id: 26,
          label: "支付买家数",
          width: 135,
        },
        {
          prop: "paidSuborders",
          id: 27,
          label: "支付子订单数",
          width: 135,
        },
        {
          prop: "payNumber",
          id: 28,
          label: "支付件数",
          width: 135,
        },
        {
          prop: "productCollectionBuyers",
          id: 29,
          label: "商品收藏买家数",
          width: 135,
        },
        {
          prop: "productCollectionCount",
          id: 30,
          label: "商品收藏次数",
          width: 135,
        },
        {
          prop: "paidProducts",
          id: 31,
          label: "支付商品数",
          width: 135,
        },
      ],
      //品类属性
      itemType: [
        { value: "visitors", label: "访客数" },
        { value: "searchCount", label: "搜索人数" },
        { value: "collectionCount", label: "收藏人数" },
        { value: "addPurchasesPeoNum", label: "加购人数" },
        { value: "payConversionRate", label: "支付转化率" },
        { value: "paidBuyerCount", label: "支付买家数" },
        { value: "uvValue", label: "UV价值" },
        { value: "averageCustomerValue", label: "客单价" },
        { value: "searchShare", label: "搜索占比" },
        { value: "collectionRate", label: "收藏率" },
        { value: "addToCartRate", label: "加购率" },
        { value: "collectionCartRate", label: "收藏加购率" },
        { value: "totalCollectionAddCarts", label: "总收藏加购人数" },
        { value: "collectionAddCartRate", label: "收藏加购率" },
      ],
      //多选商品ID
      formData: {
        libraryIdList: [{ id: "" }],
      },
      libraryOptions: [
        // { value: "1", label: "库位1" },
        // { value: "2", label: "库位2" },
        // { value: "3", label: "库位3" },
        // { value: "4", label: "库位4" },
        // { value: "5", label: "库位5" },
        // { value: "6", label: "库位6" },
      ], // 库存名称列表
      echartsData: {
        order: {
          xData: [],
          series: [],
        },
      },
      //划分词
      PartWordList: [],
      //商品ID
      BiKeywordDwdList: [],
      //总览数据
      itemData: {},
      productNo: "",
      options: [], // 选项，从后端传递过来
      open: false,
      //skc列表
      skcitemData: [],
      //sku列表
      skuitemData: [],
      echartData: {
        // order: {
        xData: [],
        female: [],
        male: [],
        average: [],
      },
      echartDataMin: {
        // order: {
        xData: [],
        female: [],
        male: [],
        average: [],
      },
      loading: false,
      //面料名称
      mianliao: [],
      //纵向滚动条
      tableHeight: "",
      // 总条数
      total: 0,

      //商品排行
      ItemDateList: [],
      //产品视角
      productView: "item",
      //店铺SaleTop
      shopSaleTopList: [],
      //渠道SaleTop
      channelSaleTopList: [],
      // 统计店铺信息
      commandstats: null,
      //统计渠道信息
      usedmemory: null,
      //锚点
      sections: document.querySelectorAll("section"),
      activeSection: null,
      active: null,
      scrollTimer: null,
      //地区前20
      TopSallist: [],
      tableHeight: window.innerHeight - 175,
      pageHeight: window.innerHeight - 540,
      //BI指标数据
      biNumberItem: [],
      biNumberSku: [],
      //时间控件
      timeObj: {},
      //客单价
      biNumberOfItem: "",

      //时间控件
      valueTime: new Date(new Date().setDate(new Date().getDate() - 1)),
      // valueTime: "",
      groupType: "date",

      highlighted: ["访客数", "交易金额", "搜索人数"], // 初始化时，前两个元素高亮

      //传递数据
      echartDataI: {
        columns: ["支付日期", "访客数", "交易金额", "搜索人数"],
        rows: [],
      },
      highlightedSku: ["访客数", "交易金额", "搜索人数"], // 初始化时，前两个元素高亮

      //Sku传递数据
      echartDataSku: {
        columns: ["支付日期", "访客数", "交易金额", "搜索人数"],
        rows: [],
      },
      //所点击的商品ID
      keywordList: [],
      //时间
      //
      dayActive: 2,
      timeArr: [
        { value: "2", label: "环比时间" },
        // { value: "7", label: "最近7天" },
        // { value: "30", label: "日" },
        // { value: "56", label: "周" },
        // { value: "365", label: "月" },
        // { value: "1", label: "自定义" },
        // { value: "90", label: "环比时间" },
      ],
      timeGap: { startTime: "", endTime: "" },
      dayActiveTime: 30,
      timeArrTime: [
        // { value: "2", label: "昨天" },
        // { value: "7", label: "最近7天" },
        { value: "30", label: "销售时间段" },
        // { value: "56", label: "周" },
        // { value: "365", label: "月" },
        // { value: "1", label: "自定义" },
        // { value: "90", label: "新品时间" },
      ],
      timeGapTime: { startTime: "", endTime: "" },
      // 店铺
      cascadeList: [],
      //
      value: ["VFU", "天猫", "vfu运动旗舰店"],
      loading: false,
      //店铺名称
      shopName: "",
      pjtUrl: process.env.VUE_APP_BASE_API,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // productNo: null,
        // manufacturerCode: null,
        // salePrice: null,
        // tagPrice: null,
        firstLevelColumn: null,
        secondLevelColumn: null,
        // logoPosition: null,
        // purchasingReportAttachments: null,
        designFabricNameList: null,
        productSeason: null,
        operationMainProducts: null,
        operationLevel: null,

        // itemType: "商品id",
        // salesGrade: ["VFU",],
        endTime: null,
        startTime: null,
        dateType: null,
        isNewList: null,
        newProStartTime: null,
        newProEndTime: null,
        itemOne: null,
        label: null,
        // isAsc: "desc",
        property: "visitors",

        firstLevelList: null,
        secondLevelList: null,
        threeLevelList: null,

        // dictType: undefined,
      },
    };
  },
  // watch: {
  //   value: {
  //     handler: function (newnew, oldold) {
  //       console.log(JSON.stringify(newnew));

  //       // this.formData = {
  //       //   libraryIdList: [{ id: "" }],
  //       // };
  //       //  this.chinaConfigure();
  //       // this.chinaConfigure();
  //       // this.$nextTick(() => {
  //       //   this.$refs.platform.echarts.resize();
  //       // });
  //     },
  //     deep: true,
  //     immediate: true,
  //   },
  // },
  created() {
    // var timeGap = JSON.parse(localStorage.getItem("objGap"));
    // if (timeGap) {
    //   console.log(JSON.stringify(timeGap));
    //   //   Object.assign(this.$data.valueTime, new Date(timeGap.valueTime));
    //   //   // this.groupType = timeGap.dateType;
    //   // this.$set(this.valueTime, timeGap.valueTime);
    //   this.valueTime = new Date(timeGap.startTime);
    //   //   this.$forceUpdate;
    //   //   // val = new Date(timeGap.startTime);
    //   //   // this.$emit("input", val);
    //   //   // this.timeObj.startTime = new Date(timeGap.startTime),
    //   //   //   this.timeObj.endTime = new Date(timeGap.endTime),
    // }
    // var storeForm = JSON.parse(localStorage.getItem("skuadminParams"));
    // if (storeForm) {
    //   // this.$set(this.queryParams, storeForm)
    //   this.queryParams = storeForm;
    //   this.getselectItemDateList(this.queryParams);
    // }
    // // var otherVal = JSON.parse(localStorage.getItem("skuadmin"));
    // // if (otherVal) {
    // //   this.$set(this.queryParams, "pageNum", otherVal.currentPage);
    // //   this.$set(this.queryParams, "pageSize", otherVal.pageSize);

    // //   // this.Nowscroll = otherVal.scrollTop
    // //   // this.scrollLeft = otherVal.scrollLeft
    // // }
    // this.getselectKeyWordList();
    //面料名称
    // this.getmianliao();
    // this.handleChangeTime()
    /** 查询品牌渠道店铺关系列表 */
    this.getdataSourceList();
    // this.openLoading();
  },

  // mounted() {
  //   // //这里增加一个nextTick，防止图表初始化异常
  //   // this.$nextTick(() => {
  //   //   this.selectKeyWordStatisticsEchartsII();
  //   // });

  //   var _this = this;
  //   this.resizeTable();
  //   window.onresize = function () {
  //     _this.resizeTable();
  //   };
  //   window.addEventListener("scroll", this.startScrollTimer);
  // },
  // beforeDestroy() {
  //   window.removeEventListener("scroll", this.startScrollTimer);
  // },
  // //记得清空  如果在keepalive中 则使用activated  deactivated
  // destroyed() {
  //   window.onresize = null;
  // },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();

      // this.handleChange();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.queryParams = {};

      this.resetForm("queryForm");
      this.BiKeywordDwdList = [];
      this.handleQuery();
    },
    // 收起展开时触发
    toggleTreeExpand(row, treeExpanded, event) {
      console.log(row, treeExpanded, event);
    },
    //匹配商品ID
    getselectKeyWordList(key) {
      selectKeyWordList({ inputValue: key }).then((response) => {
        this.libraryOptions = response.sort((a, b) => a.length - b.length);
      });
    },
    //添加库存名称
    addLibraryIdList() {
      if (this.formData.libraryIdList.length > 4) {
        this.$modal.msgError("请选择不超过5个商品ID");
        return;
      }
      if (this.formData.libraryIdList.length > 0) {
        let hasValue = false;
        for (let i = 0; i < this.formData.libraryIdList.length; i++) {
          if (!this.formData.libraryIdList[i].id) {
            hasValue = true;
            break;
          }
        }
        if (hasValue) {
          return this.$message.warning("请先选择未选择项");
        }
        this.formData.libraryIdList.push({ id: "" });
      }
    },
    //库存名称删除
    delRow(item, index) {
      if (this.formData.libraryIdList.length > 1) {
        this.formData.libraryIdList.splice(index, 1);
        // this.$forceUpdate;
        const E = echarts.init(this.$refs.echarts);
        E.dispose();
      } else {
        this.$message.warning("至少选择一项");
      }
    },

    handleSortChange(column) {
      /**
  排序方向 asc 升序 desc 降序
 
private String orderDirection;*/
      switch (column.order) {
        case "ascending":
          this.queryParams.isAsc = "asc";
          break;
        case "descending":
          this.queryParams.isAsc = "desc";
          break;
        default:
          this.queryParams.isAsc = null;
          break;
      }
      this.queryParams.property = column.prop; //查询字段是表格中字段名字
      // this.queryParams.orderDirection = column.order;//动态取值排序顺序
      this.getList();
    },
    //表头
    renderheader(h, { column, $index }) {
      return h("div", {}, [
        h("div", {}, column.label.split("\n")[0]),
        h("div", {}, column.label.split("\n")[1]),
      ]);
    },

    //锚点
    scrollToSection(index) {
      const target = this.sections[index];
      // console.log(JSON.stringify(index));
      //     return
      this.active = index;
      if (target) {
        this.$nextTick(() => {
          target.scrollIntoView({ behavior: "smooth" });
          this.activeSection = target;
        });
      }
    },
    //锚点
    startScrollTimer() {
      this.scrollTimer = setInterval(() => {
        const currentSection = document.querySelector("section[data-active]");
        if (currentSection !== this.activeSection) {
          this.activeSection = currentSection;
        } else {
          clearInterval(this.scrollTimer);
        }
      }, 100); // 每100毫秒检查一次滚动位置是否变化
    },
    //锚点高亮
    isActiveSection(sectionId) {
      // 检查当前导航项是否处于高亮状态
      return this.active === sectionId;
    },

    //新老品时间控件
    changDay(val) {
      this.dayActive = val;
      this.timeGap.startTime = val[0];
      this.timeGap.endTime = val[1];
    },
    getDateArr(value) {
      this.timeGap.startTime = value[0];
      this.timeGap.endTime = value[1];
      console.log(JSON.stringify(this.dayActive));
      console.log(JSON.stringify(this.timeGap));
      // if (this.groupType == "daterange") {
      this.queryParams.chainStartDate = this.timeGap.startTime;
      this.queryParams.chainEndDate = this.timeGap.endTime;
      if (!this.queryParams.endTime) {
        return;
      } else {
        //一级
        this.getPartWordList();
      }
      // }
    },
    //销售时间段
    changDayTime(val) {
      this.dayActiveTime = val;
      this.timeGapTime.startTime = val[0];
      this.timeGapTime.endTime = val[1];
    },
    getDateArrTime(value) {
      this.timeGapTime.startTime = value[0];
      this.timeGapTime.endTime = value[1];
      // console.log(JSON.stringify(this.dayActive));
      // console.log(JSON.stringify(this.timeGap));

      this.queryParams.newProStartTime = this.timeGapTime.startTime;
      this.queryParams.newProEndTime = this.timeGapTime.endTime;
      // this.handleChange();
      this.getList();
    },
    //店铺控件
    handleChange(val) {
      console.log(JSON.stringify(val));

      // var lastElement = val.pop();
      // this.shopName = lastElement

      // console.log(this.dayActive);
      // let obj = {
      //   salesGrade: this.value.join(","),
      //   ...this.timeObj,
      //   item: this.productView,
      //   ...this.queryParams,
      // };
      // console.log(JSON.stringify(obj));
      // var skuadminParams = JSON.parse(localStorage.getItem("skuadminParams"));
      // if (skuadminParams) {
      //   this.getselectItemDateList(skuadminParams);
      //   localStorage.setItem("skuadminParams", JSON.stringify(skuadminParams));
      // } else {
      // (this.queryParams.salesGrade = this.value.join(",")),
      this.itemData = {};
      this.productNo = "";
      this.queryParams.startTime = this.timeObj.startTime;
      this.queryParams.endTime = this.timeObj.endTime;
      this.queryParams.dateType = this.timeObj.dateType;
      // this.queryParams.item = this.productView;
      if (!this.queryParams.endTime) {
        return;
      } else {
        //一级
        // this.getPartWordList();
        //二级
        this.getList();
        if (!this.queryParams.inputValue) {
          return;
        } else {
          this.selectKeyWordStatisticsEchartsI();
          if (!this.formData.libraryIdList[0].id) {
            return;
          } else {
            this.selectKeyWordStatisticsEchartsII();
          }
        }
      }
      // }
      let param = {
        dataSource: this.value,
        startTime: this.dateFormat(this.timeObj.startTime),
        endTime: this.dateFormat(this.timeObj.endTime),
        dataType: this.groupType,
      };
      console.log(JSON.stringify(param));
      if (!param.endTime) {
        return;
      } else {
        // this.getechartChannelData(obj)
        // this.getnumberOfItem(param);
        // this.getTopSal(param);
      }
    },

    //选完时间后发请求
    handleChangeTime(timeObj) {
      // console.log(type)
      // console.log(timeObj)
      // TODO
      this.timeObj = timeObj;
      console.log(JSON.stringify(this.timeObj));
      // let obj = {
      //   salesGrade: this.value.join(","),
      //   ...timeObj,
      //   item: this.productView,
      //   ...this.queryParams,
      // };
      // var skuadminParams = JSON.parse(localStorage.getItem("skuadminParams"));
      // if (skuadminParams) {
      //   this.getselectItemDateList(skuadminParams);
      //   localStorage.setItem("skuadminParams", JSON.stringify(skuadminParams));
      // } else {
      // if (!this.queryParams.itemType) {
      //   this.$modal.msgError("请选择产品视角");
      //   return;
      // }
      this.queryParams.pageNum = 1;
      // (this.queryParams.salesGrade = this.value.join(",")),
      this.queryParams.startTime = this.timeObj.startTime;
      this.queryParams.endTime = this.timeObj.endTime;
      this.queryParams.dateType = this.timeObj.dateType;
      // this.queryParams.item = this.productView;
      if (!this.queryParams.endTime) {
        return;
      } else {
        //一级
        // this.getPartWordList();
        this.getList();
        if (!this.queryParams.inputValue) {
          return;
        } else {
          this.selectKeyWordStatisticsEchartsI();
          return;
          if (!this.formData.libraryIdList[0].id) {
            return;
          } else {
            this.selectKeyWordStatisticsEchartsII();
          }
        }
      }

      let param = {
        dataSource: this.value,
        startTime: this.dateFormat(timeObj.startTime),
        endTime: this.dateFormat(timeObj.endTime),
        dataType: this.groupType,
      };
      console.log(JSON.stringify(param));
      if (!param.endTime) {
        return;
      } else {
        // this.getechartChannelData(obj)
        //客件数
        // this.getnumberOfItem(param);
        // //地区Top20
        // this.getTopSal(param);
      }
    },
    productEdit(row, column, cell, event) {
      // this.queryParams.inputValue = row.rootNode;
      // if (row.firstLevelColumn != null && row.secondLevelColumn != null) {
      //   console.log(3);
      //   this.queryParams.threeLevelList = row.threeLevelColumn;
      // } else
      if (
        row.firstLevelColumn != null &&
        row.secondLevelColumn != null &&
        row.threeLevelColumn == null
      ) {
        console.log(2);
        this.queryParams.threeLevelList = null;
        this.queryParams.secondLevelList = row.rootNode;
      } else if (
        row.secondLevelColumn == null &&
        row.threeLevelColumn == null
      ) {
        console.log(1);
        this.queryParams.secondLevelList = null;
        this.queryParams.threeLevelList = null;
        this.queryParams.firstLevelList = row.rootNode;
      } else {
        console.log(3);
        this.queryParams.threeLevelList = row.rootNode;
      }

      delete this.queryParams.inputList;
      this.getList();
    },
    tableEdit(row, column, cell, event) {
      console.log(event);
      this.itemData = row;
      this.queryParams.inputValue = row.productId;
      this.selectKeyWordStatisticsEchartsI();
      // return;
      // if (row.sourceName) {
      //   this.productNo = row.sourceName;
      //   // this.queryParams.keyWordGrade = "二级关键字";
      // } else {
      //   this.productNo = row.label;
      //   this.queryParams.label = row.label;
      //   // this.queryParams.keyWordGrade = "一级关键字";
      //   // delete this.queryParams.property;
      //   //二级
      //   this.getList();
      // }
      // let lable = "";

      // if (this.queryParams.itemType == "商品id") {
      //   lable = row.productId;
      // } else if (this.queryParams.itemType == "item") {
      //   lable = row.item;
      // } else if (this.queryParams.itemType == "spu") {
      //   lable = row.productNo;
      // }
      // this.productNo = lable;
      // console.log(lable);

      if (event.ctrlKey) {
        //如果ctr1按下就让他按下的标识符变为true
        var m = [];
        this.formData.libraryIdList.forEach((item) => {
          if (item.id == "") {
            this.formData.libraryIdList.splice(0, 1);
          }
          m.push(item.id);
        });
        if (this.formData.libraryIdList.length > 4) {
          this.$modal.msgError("请选择不超过5个商品ID");
          return;
        }
        let filteredArray = m.filter(function (item) {
          // if (row.sourceName) {
          //   return item == row.sourceName;
          // } else {
          //   return item == row.label;
          // }
          return item == row.productId;
        });

        if (filteredArray.length > 0) {
          this.$modal.msgError("你选择的商品ID重复，请重新选择");
          return;
        } else {
          this.formData.libraryIdList.push({ id: row.productId });
        }
      }
      this.selectKeyWordStatisticsEchartsII();
    },
    changeView() {
      this.getList();
      this.formData.libraryIdList = [{ id: "" }];
      const E = echarts.init(this.$refs.echarts);
      E.dispose();
    },
    // 二级
    getList() {
      delete this.queryParams.inputList;
      delete this.queryParams.inputValue;
      // this.loading = true;
      this.openLoading();
      selectCompetitorShopRank(this.queryParams).then((response) => {
        this.$modal.closeLoading();

        this.BiKeywordDwdList = response.rows ? response.rows : [];

        this.total = response.total;
        // var l = [];
        if (response.rows.length > 0) {
          this.itemData = response.rows[0];
          this.queryParams.inputValue = response.rows[0].shopName;
          this.selectKeyWordStatisticsEchartsI();
          // this.productNo = response.rows[0].label;
          //   response.rows.forEach((item, index) => {
          //     item.id = index;
          //     l.push(item);
          //   });
        }
        // console.log(JSON.stringify(l));
        // this.BiKeywordDwdList = l;
        // this.loading = false;
      });
    },
    // 二级
    pageList() {
      // this.loading = true;

      selectCompetitorShopRank(this.queryParams).then((response) => {
        this.BiKeywordDwdList = response.rows ? response.rows : [];

        this.total = response.total;
        // var l = [];
        // if (response.rows.length > 0) {
        //   this.itemData = response.rows[0];
        //   this.productNo = response.rows[0].label;
        //   //   response.rows.forEach((item, index) => {
        //   //     item.id = index;
        //   //     l.push(item);
        //   //   });
        // }
        // console.log(JSON.stringify(l));
        // this.BiKeywordDwdList = l;
        // this.loading = false;
      });
    },
    // 一级
    getPartWordList() {
      // this.loading = true;

      selectGradeList(this.queryParams).then((response) => {
        console.log(JSON.stringify(response));
        this.PartWordList = response ? response : [];

        // if (response.length > 0) {
        //   this.queryParams.label = response[2].label;
        //   this.queryParams.isAsc = "desc";
        //   this.queryParams.property = "visitors";
        //   this.getList();
        // } else {
        //   this.BiKeywordDwdList = [];
        // }
      });
    },

    keywordListlength(type) {
      // this.selectKeyWordStatisticsEchartsII();
      console.log(JSON.stringify(type));
      console.log(JSON.stringify(this.formData.libraryIdList));
      var m = [];
      this.formData.libraryIdList.forEach((item) => {
        m.push(item.id);
        // if (item.id == type) {
        //   this.$modal.msgError("你输入的商品ID重复，请重新输入");
        // }
      });
      let filteredArray = m.filter(function (item) {
        return item === type;
      });

      if (filteredArray.length > 1) {
        this.$modal.msgError("你输入的商品ID重复，请重新输入");
      }
    },
    //曲线分析
    selectKeyWordStatisticsEchartsII() {
      delete this.queryParams.inputValue;
      if (!this.formData.libraryIdList[0].id) {
        // console.log(555555);
        // this.$modal.msgError("请选择商品ID");
        return;
      }
      // console.log(JSON.stringify(this.formData.libraryIdList));
      const input = [];
      this.formData.libraryIdList.forEach((item) => {
        input.push(item.id);
      });
      this.queryParams.inputList = input.join();
      // if (
      //   this.queryParams.inputValue.includes("品牌词") ||
      //   this.queryParams.inputValue.includes("品类词") ||
      //   this.queryParams.inputValue.includes("汇总")
      // ) {
      //   this.queryParams.keyWordGrade = "一级关键字";
      // } else {
      //   this.queryParams.keyWordGrade = "二级关键字";
      // }

      // this.formData.libraryIdList.map((item) => item.id).join();
      // console.log(JSON.stringify(input));
      // this.queryParams.inputValue = input;
      // console.log(JSON.stringify(this.queryParams));
      // return;
      // this.queryParams.inputValue = "vfu官方旗舰店,1.vfu运动,af 319585";
      comparisonStatisticsPro(this.queryParams).then((response) => {
        console.log(JSON.stringify(response));

        let order = { date: [], data: [] };
        order.date = response.map((item) => item.dataDateUnit);
        response.forEach((item) => {
          order.data.push(item.keywordProperty);
        });
        const xData = order.date;
        const keyArray = Object.keys(order.data[0]);
        const series = [];
        keyArray.forEach((key) => {
          series.push({
            name: key,
            data: order.data.map((item) => item[key]),
            type: "line",
          });
        });

        // let tooltip = {};
        // if (this.queryParams.property == "payConversionRate") {
        //   tooltip = {
        //     trigger: "axis",
        //     formatter: "{c}%",
        //   };
        // } else {
        //   tooltip = {
        //     trigger: "axis",
        //   };
        // }

        const option = {
          grid: {
            left: "5%",
            top: "10%",
            right: "3%",
            bottom: "10%",
          },
          // 提示框
          tooltip: { trigger: "axis" },
          xAxis: {
            data: xData,
          },
          yAxis: {},
          legend: {
            data: keyArray,
          },
          series,
        };

        const optionEcharts = {
          grid: {
            left: "5%",
            top: "10%",
            right: "3%",
            bottom: "10%",
          },
          // 提示框
          tooltip: {
            trigger: "item",
            formatter: "{c}%",
          },
          xAxis: {
            data: xData,
          },
          yAxis: {
            axisLabel: { formatter: "{value}%" },
          },
          legend: {
            data: keyArray,
          },
          series,
        };
        // this.echartData.order.xData = xData;
        // this.echartData.order.series = series;
        const E = echarts.init(this.$refs.echarts);

        E.setOption(option);
        // E.dispose();
        // E.resize();
        // if (
        //   // this.queryParams.property == "payConversionRate" ||
        //   this.queryParams.property == "orderConversionRate"
        // ) {
        //   E.setOption(optionEcharts);
        // } else {
        //   E.setOption(option);
        // }
      });
    },
    //曲线分析
    selectKeyWordStatisticsEchartsI() {
      selectCompetitorShopStatistics(this.queryParams).then((response) => {
        // if (response.length <= 0) {
        //   return;
        // }
        var row = [];
        response.forEach((item) => {
          row.push({
            支付日期: item.dataDateUnit,
            交易金额: item.payAmount,
            访客数: item.visitors,
            搜索人数: item.searchCount,
            收藏人数: item.collectionCount,
            加购人数: item.addPurchasesPeoNum,
            支付转化率: item.payConversionRate / 100,
            支付买家数: item.paidBuyerCount,
            UV价值: item.uvValue,
            客单价: item.averageCustomerValue,
            搜索占比: item.searchShare,
            收藏率: item.collectionRate / 100,
            加购率: item.addToCartRate / 100,
            收藏加购率: item.collectionCartRate / 100,
            总收藏加购人数: item.totalCollectionAddCarts,
            收藏加购率: item.collectionAddCartRate / 100,
            // 支付买家数: item.paidCustomers,
            // 支付新买家数: item.payNewBuyers,
            // 支付老买家数: item.oldPaidCustomers,
            // 老买家支付金额: item.oldCustomerPaidAmount,
            // 成功退款金额: item.successReturnAmount,
            // 客单价: item.avgCartValue,
            // UV价值: item.uvValue,
            // 老访客数: item.oldVisitors,
            // 新访客数: item.newVisitors,
            // 淘宝客佣金: item.tbUserCommission,
            // 描述相符评分: item.productDetailMatchScore,
            // 物流服务评分: item.logisticsServiceScore,
            // 支付商品数: item.paidProducts,
            // 加购件数: item.addtocartItems,
            // 支付子订单数: item.paidSuborders,
            // 支付件数: item.payNumber,
            // 商品收藏次数: item.productCollectionCount,
            // 商品收藏买家数: item.productCollectionBuyers,
          });
        });
        // console.log(JSON.stringify(row));

        this.echartDataI.rows = row;
      });
    },
    //多对一指标点击回传
    handleSetLineSkuData(type) {
      console.log(JSON.stringify(type));
      this.queryParams.property = type;
      this.selectKeyWordStatisticsEchartsII();
      return;
      // console.log(JSON.stringify(type));
      if (this.highlightedSku.includes(type)) {
        return;
      }
      // 移除旧的高亮元素
      this.highlightedSku.shift();
      // // 添加新的高亮元素
      this.highlightedSku.push(type);

      console.log(JSON.stringify(this.highlightedSku));
      var arr = ["支付日期"];
      // let temp = arr.concat(this.highlightedSku);
      // // let temp = arr.push(type)
      // console.log(JSON.stringify(temp));
      // this.echartDataSku.columns = temp;
      let array = arr.concat(this.highlightedSku);
      // let temp = arr.push(type)
      // console.log(JSON.stringify(temp));
      // var array = ["支付日期", "退款金额", "净销售额", "毛利率"];
      var rateItem;

      // 遍历数组，找到包含'率'字的元素
      for (var i = 0; i < array.length; i++) {
        if (array[i].includes("率")) {
          rateItem = array[i];
          break;
        }
      }

      // 如果找到了包含'率'字的元素，将其移到数组最后
      if (rateItem) {
        var index = array.indexOf(rateItem);
        if (index !== array.length - 1) {
          array.splice(index, 1);
          array.push(rateItem);
        }
      }

      console.log(array);
      this.echartDataSku.columns = array;
    },
    //一对多指标点击回传
    handleSetLineChartData(type) {
      //
      if (this.highlighted.includes(type)) {
        return;
      }
      // 移除旧的高亮元素
      this.highlighted.shift();
      // // 添加新的高亮元素
      this.highlighted.push(type);

      console.log(JSON.stringify(this.highlighted));
      var arr = ["支付日期"];
      let array = arr.concat(this.highlighted);
      // let temp = arr.push(type)
      // console.log(JSON.stringify(temp));
      // var array = ["支付日期", "退款金额", "净销售额", "毛利率"];
      var rateItem;

      // 遍历数组，找到包含'率'字的元素
      for (var i = 0; i < array.length; i++) {
        if (array[i].includes("率")) {
          rateItem = array[i];
          break;
        }
      }

      // 如果找到了包含'率'字的元素，将其移到数组最后
      if (rateItem) {
        var index = array.indexOf(rateItem);
        if (index !== array.length - 1) {
          array.splice(index, 1);
          array.push(rateItem);
        }
      }

      console.log(array);
      this.echartDataI.columns = array;
    },

    // 时间格式转换
    dateFormat(date) {
      date = new Date(date);
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate() + "";
      return Y + M + D;
    },
    /** 查询品牌渠道店铺关系列表 */
    getdataSourceList() {
      listAll().then((response) => {
        let result = this.transformData(response);
        this.cascadeList = result;
      });
    },
    //店铺渠道品牌转换

    transformData(data) {
      let result = [];

      data.forEach((item) => {
        let brand = item.brand;
        let channel = item.channel;
        let shopName = item.shopName;

        // 如果brand在结果数组中不存在，则创建一个新的数组
        let brandIndex = result.findIndex(
          (brandObj) => brandObj.label === brand
        );
        if (brandIndex === -1) {
          result.push({
            label: brand,
            value: brand,
            children: [],
          });
          brandIndex = result.length - 1;
        }

        // 如果channel在当前brand的children数组中不存在，则创建一个新的数组
        let channelIndex = result[brandIndex].children.findIndex(
          (channelObj) => channelObj.label === channel
        );
        if (channelIndex === -1) {
          result[brandIndex].children.push({
            label: channel,
            value: channel,
            children: [],
          });
          channelIndex = result[brandIndex].children.length - 1;
        }

        // 如果shopName在当前channel的children数组中不存在，则创建一个新的数组
        let shopIndex = result[brandIndex].children[
          channelIndex
        ].children.findIndex((shopObj) => shopObj.label === shopName);
        if (shopIndex === -1) {
          result[brandIndex].children[channelIndex].children.push({
            label: shopName,
            value: shopName,
            // children: []
          });
        }
      });

      return result;
    },

    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载数据，请稍候！");
    },
    // // table自动高度
    // returnTableHeight(ref, bottomOffset) {
    //   let height = null;
    //   height =
    //     window.innerHeight - ref.getBoundingClientRect().top - bottomOffset;
    //   return height;
    // },

    // resizeTable() {
    //   this.$nextTick(() => {
    //     this.tableHeight = this.returnTableHeight(this.$refs.tableDom, 100);
    //   }, 0);
    // },
    /** 导出按钮操作 */
    handleExport() {
      return;
      if (this.ItemDateList.length <= 0) {
        this.$modal.msgError("暂无数据可导出");

        return;
      }
      this.download(
        "product/BiAnalysis/export",
        {
          ...this.queryParams,
        },
        `商品排行_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
i.el-icon-top::before {
  color: #ff0000;
  /* 这将把颜色改为红色 */
}
i.el-icon-caret-top::before {
  color: #ff0000;
  /* 这将把颜色改为红色 */
}
i.el-icon-bottom::before {
  color: green;
  /* 这将把颜色改色 */
}
i.el-icon-caret-bottom::before {
  color: green;
  /* 这将把颜色改色 */
}

.el-dialog-div {
  height: 80vh;
  overflow-x: hidden;
}
span.textname {
  display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
  border: none;
}
.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 500px;
  resize: none;
  cursor: pointer;
}
/* 移除默认的列表样式 */
ul {
  margin-top: 0.4%;
  list-style-type: none;
  /* 设置弹性布局，使列表项横向排列 */
  display: flex;
  /* 添加一些内边距和背景颜色 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置边框和圆角 */
  // border: 1px solid #ddd;
  border-radius: 5px;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

/* 设置列表项样式 */
li {
  /* 添加一些内边距和右边距 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置链接文本样式 */
  font-size: 15px;
  color: #bbb;
  text-decoration: none;
}

li.active a {
  // color: #f00;
  /* 高亮颜色 */
  color: #fff;
  background-color: #40c9c6;
}

// section {
//   margin-top: 60px;
// }

.dashboard-editor-container {
  padding: 16px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
<style>
.el-scrollbar__wrap {
  /* overflow-x: hidden; */
  /* overflow-y: hidden; */
}
</style>
/** 访客百分比 *
private Double visitorRate:
/** 环比访客 */
private Integer chainVisitors:
/** 访客变化 */
private Integer visitorChange:
/** 访客环比 */
private Double visitorChain :
---支付金额模块
/** 支付金额 */
@Excel(name = "支付金额”)
private Double payAmount
/** 金额百分比 */
private Double payAmountRate;
/** 环比金额 */
private Double chainPayAmount:
/** 金额变化 */
private Double payAmountchange:
/** 金额环比 */
private Double payAmountchain:
--转化率模块-----
/** 支付转化率 */
@Excel(name ="支付转化率”)
private Double payConversionRate:
/** 环比转化率 */
private Double chainPayConversionRate:
/** 转化率环比 */
private Double payConversionRateChain;
/** 竞品数据ID */
private Long id;

/** 名称 */
@Excel(name = "名称")
private String productName;

/** 商品ID */
@Excel(name = "商品ID")
private String productId;

/** 店铺名称 */
@Excel(name = "店铺名称")
private String shopName;

/** 日期 */
@JsonFormat(pattern = "yyyy-MM-dd")
@Excel(name = "日期", width = 30, dateFormat = "yyyy-MM-dd")
private Date dataDate;

/** 行业排名 */
@Excel(name = "行业排名")
private Integer industryRank;

/** 交易金额 */
@Excel(name = "交易金额")
private Double payAmount;
//private Double transactionAmount;

/** 访客数 */
@Excel(name = "访客数")
private Integer visitors;

/** 搜索人数 */
@Excel(name = "搜索人数")
private Integer searchCount;

/** 支付件数 */
@Excel(name = "支付件数")
private Integer paymentCount;

/** 收藏人数 */
@Excel(name = "收藏人数")
private Integer collectionCount;

/** 加购人数 */
@Excel(name = "加购人数")
private Integer addPurchasesPeoNum;
//private Integer addToCartCount;

/** 支付转化率 */
@Excel(name = "支付转化率")
private Double payConversionRate;
//private Double paymentConversionRate;
private Double payConversionRateChain;

/** 搜索占比 */
@Excel(name = "搜索占比")
private Double searchShare;

/** 支付买家数 */
@Excel(name = "支付买家数")
private Integer paidBuyerCount;

/** 收藏率 */
@Excel(name = "收藏率")
private Double collectionRate;

/** 加购率 */
@Excel(name = "加购率")
private Double addToCartRate;

/** 客单价 */
@Excel(name = "客单价")
private Double averageCustomerValue;

/** UV价值 */
@Excel(name = "UV价值")
private Double uvValue;

/** 总收藏加购人数 */
@Excel(name = "总收藏加购人数")
private Integer totalCollectionAddCarts;

/** 收藏加购率 */
@Excel(name = "收藏加购率")
private Double collectionAddCartRate;

/** 金额占比 */
@Excel(name = "金额占比")
private Double payAmountProportion;
/** 访客占比 */
@Excel(name = "访客占比")
private Double visitorsProportion;


/** 年 */
@Excel(name = "年")
private Integer dataYear;

/** 月 */
@Excel(name = "月")
private Integer dataMonth;

/** 周 */
@Excel(name = "周")
private Integer dataWeek;

private String dataDateUnit; //x轴坐标


vue3和微信小程序，两者JS的语法逻辑有点类似

